<template>
    <li class="battery" name="electicMonitor">
        <div class="power-header-box">{{electricmonitorData.name}}</div>
        <div class = "isid" style="display: none">{{electricmonitorData.deviceid}}</div>
        <div class="power-content-box">
            <div class="power-content-left">A相电流Ia</div>
            <div class="power-content-right">{{electricmonitorAlarm["983041"]}}A</div>
        </div>
        <div class="power-content-box">
            <div class="power-content-left">B相电流Ib</div>
            <div class="power-content-right">{{electricmonitorAlarm["983042"]}}A</div>
        </div>
        <div class="power-content-box">
            <div class="power-content-left">C相电流Ic</div>
            <div class="power-content-right">{{electricmonitorAlarm["983043"]}}A</div>
        </div>
        <div class="power-content-box">
            <div class="power-content-left">A相电压Ua</div>
            <div class="power-content-right">{{electricmonitorAlarm["983044"]}}V</div>
        </div>
        <div class="power-content-box">
            <div class="power-content-left">B相电压Ub</div>
            <div class="power-content-right">{{electricmonitorAlarm["983045"]}}V</div>
        </div>
        <div class="power-content-box">
            <div class="power-content-left">C相电压Uc</div>
            <div class="power-content-right">{{electricmonitorAlarm["983046"]}}V</div>
        </div>
    </li>
</template>
<script>
    export default {
        name:'electricMonitor',
        props:[
            "electricmonitorData",
            "electricmonitorAlarm"
        ],
        data() {
            return {
            }
        },
        methods: {
        }
    }
</script>
<style >
    .power-content-box{
        width: 180px;
        height: 25px;
        overflow: hidden;
        background: #fff;
        border-bottom:1px solid #ebeef5;
        position: relative;
    }
    .power-content-box:hover{
        background: #f5f7fa;
        cursor: pointer;
    }
    .power-content-left{
        float: left;
        width: 100px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        font-size: 12px;
    }
    .power-content-right{
        float: left;
        width: 70px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        font-size: 12px;
    }
    .power-content-box .power-content-number{
        font-size: 14px;
        font-weight: 600;
        color: red;
    }
    .power-content-more{
        float: left;
        width: auto;
        font-size: 12px;
        position: absolute;
        right: 5px;
        top: 4px;
    }
    .power-content-more:hover{
        color: red;
        cursor: pointer;
    }


    .device-status{
        width:13px;
        height:13px;
        border-radius: 50%;
        background: #13ce66;
        box-shadow: 2px 2px 3px #bfbeb8;
        margin: auto;
        margin-top: 5px;
    }
    .device_status_active{
        background: #ff4949;
    }
</style>
